<template>
  <div>
    <div>
      <div v-if="msg.type=='send'" class="msg-content send">
        <span>{{msg.source}} -> {{msg.target}} {{format(new Date(msg.time))}}</span>
        <div class="content" v-html="msgContent"></div>
      </div>
      <div v-if="msg.type=='rec'" class="msg-content rec">
        <span>
          <a href="#" @click="$emit('changeTarget',msg.source)">{{msg.source}}</a>
          {{format(new Date(msg.time))}}
        </span>
        <div class="content" v-html="msgContent"></div>
      </div>
      <div v-if="msg.type=='system'" class="system">
        <span>{{format(new Date(msg.time))}}</span>
        <div>系统消息： {{msg.content}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import DateUtil from "../util/DateUtil";
import { Msg } from "../Bean";
import MsgConstants from "../constants/MsgConstants";

export default {
  props: {
    msg: {
      type: Object,
      default: function() {
        "".replace()
        return new Msg(MsgConstants.TYPE_SYSTEM, "Let's have a talk");
      }
    }
  },
  methods: {
    format(date) {
      return DateUtil.format(date);
    }
  },
  computed:{
    msgContent(){
      return this.msg.content.replace(/\n/g,"<br/>")
    }
  }
};
</script>
<style scoped>
.send {
  /* text-align: right; */
  float: right;
  /* color: darkgreen; */
  background-color: rgb(67, 216, 208);
}
.rec {
  /* text-align: left; */
  float: left;
  /* color: blue; */
  /* background-color: rgb(132, 132, 197, 0.7); */
  background-color: rgb(239, 237, 237);
}
.system {
  clear: both;
  padding: 20px;
  text-align: center;
  color: gray;
}
.msg-content {
  clear: both;
  padding: 20px;
  margin: 10px;
  border-radius: 10px;
  display: inline-block;
  width: inherit;
  word-break: break-all;
}
/* .content {
} */
</style>